<template>
  <u-popup :show="value">
    <view class="head">
      <view class="title">配送至</view>
      <image class="close" src="@/static/goodDetail/close.png" @click="handleClose"></image>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="active = index">
        <image :src="index == active ? '/static/my/check.png' : '/static/my/uncheck.png'"> </image>
        <view class="cont">
          <view class="user-msg">
            <view class="name">{{ item.name }}</view>
            <view>{{ item.mobile }}</view>
          </view>
          <view class="address">{{ item.address }}</view>
        </view>
      </view>
    </view>
    <view class="foot">
      <u-button type="primary" shape="circle" @click="handleSave">确认</u-button>
    </view>
  </u-popup>
</template>
<script setup>
import uPopup from "@/uni_modules/uview-plus/components/u-popup/u-popup.vue";
import uButton from "@/uni_modules/uview-plus/components/u-button/u-button.vue";
import { reactive, toRefs, defineEmits, computed } from 'vue'
const emit = defineEmits(['success', 'update:modelValue']);
const props = defineProps({
  modelValue: Boolean,
  list: Array
})
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const state = reactive({
  active: 0,
})
function handleClose () {
  emit('update:modelValue', false)
}
function handleSave () {
  const item = props.list[state.active]
  emit('success', item)
  emit('update:modelValue', false)
}
const {
  active,
} = toRefs(state)
</script>

<style lang="scss" scoped>
.head {
  margin: 16rpx;
  position: relative;
  text-align: center;

  .title {
    font-weight: 800;
    font-size: 36rpx;
  }

  image {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 44rpx;
    height: 44rpx;
  }
}

.item {
  padding: 29rpx 35rpx 29rpx 27rpx;
  background: #FFFFFF;
  border-radius: 22rpx;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;

  &>image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 22rpx;
  }

  .user-msg {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 26rpx;
    color: #333333;
    margin-bottom: 14rpx;

    .name {
      margin-right: 26rpx;
    }
  }

  .address {
    font-weight: 500;
    font-size: 26rpx;
    color: #999999;
    border-bottom: 1rpx solid #F5F5F5;
    padding-bottom: 20rpx;
  }
}

.foot {
  text-align: right;
  padding: 16rpx;

}
</style>